import React, {Component} from 'react';
import {
  View, Text, TouchableOpacity, Dimensions, ScrollView,
  Animated, StyleSheet, ViewPropTypes
} from 'react-native';
import PropTypes from 'prop-types';
import FlowModal from "../../components/flow-modal/FlowModal";


const {width, height} = Dimensions.get('window');

const imageWidth = 10;
const itemHeight = 40;
const itemWidth = (width - imageWidth) / 4;


export default class Tabs1 extends Component {
  static propTypes = {
    goToPage: PropTypes.func,
    activeTab: PropTypes.number,
    tabs: PropTypes.array,
    backgroundColor: PropTypes.string,
    activeTextColor: PropTypes.string,
    inactiveTextColor: PropTypes.string,
    textStyle: Text.propTypes.style,
    tabStyle: ViewPropTypes.style,
    renderTab: PropTypes.func,
    underlineStyle: ViewPropTypes.style,
  }

  renderTab(name, page, isTabActive, onPressHandler) {
    if(isTabActive){
      if(page===0){

      }else if(this.props.tabs.length-1===page||this.props.tabs.length-2===page){

      } else if(this.props.tabs.length-page>=3){
        this._scrollView&&this._scrollView.scrollTo({x: (page-1)*itemWidth, y: 0, animated: true, });
      }
    }

    const {activeTextColor = '#555', inactiveTextColor = '#999', textStyle,} = this.props;
    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
    const fontWeight = isTabActive ? 'bold' : 'normal';
    return (
      <TouchableOpacity
        style={styles.tab}
        key={name}
        accessible={true}
        accessibilityLabel={name}
        accessibilityTraits='button'
        onPress={() => onPressHandler(page)}
      >
        <Text style={[{color: textColor, fontWeight,fontSize:12}, textStyle,]}>
          {name}
        </Text>
      </TouchableOpacity>
    );
  }

  render() {
    const {backgroundColor = null, containerWidth, tabs, scrollValue} = this.props;
    const numberOfTabs = tabs.length;

    const tabUnderlineStyle = {
      position: 'absolute',
      width: itemWidth,
      height: 4,
      backgroundColor: 'navy',
      bottom: 0,
    };

    const translateX = scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, itemWidth],
    });
    return (
      <View style={{flexDirection: 'row'}}>

        <ScrollView
          ref={(scrollView) => { this._scrollView = scrollView; }}
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          style={[styles.tabs, {backgroundColor: backgroundColor}]}>
          {
            this.props.tabs.map((name, page) => {
              const isTabActive = this.props.activeTab === page;
              const renderTab = this.props.renderTab || this.renderTab;
              return this.renderTab(name, page, isTabActive, this.props.goToPage);
            })
          }
          <Animated.View
            style={[
              tabUnderlineStyle,
              {
                transform: [{translateX}]
              },
              this.props.underlineStyle,
            ]}
          />
        </ScrollView>
        <View style={{
          height: itemHeight, alignItems: 'center',
          justifyContent: 'center',
        }}>
          <FlowModal/>
        </View>

      </View>

    );
  }
};

const styles = StyleSheet.create({
  tab: {
    width: itemWidth,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabs: {
    width: width,
    height: itemHeight,
    flexDirection: 'row',

    borderBottomWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderColor: '#ececeb',
  }
});